<template>
    <div >
        <Add  :data="carousels" @show="show"></Add>
        <List :data="carousels" :pagination="pagination" @show="show"></List>
        <Pagination :pagination="pagination" @show="show"></Pagination>
        
    </div>
</template>
<script setup>
import Add from './modules/Add.vue';
import List from './modules/List.vue';
import Pagination from '@/components/Pagination.vue';
import { ref,onMounted,onUnmounted } from 'vue';
import { ElMessage  } from "element-plus";
import { useContentStore } from "@/stores/content";
import { storeToRefs } from "pinia";
import { getCarousels } from '@/services/carousel';
const contentStore = useContentStore();
const carousels = ref([]);
const pagination = ref({});
const show = async function(current = 1,pageSize = 5){
    let res = await getCarousels({current,pageSize});

    carousels.value = res.data.list;
    pagination.value = res.data;
}
onMounted(() => {
    show();
});
</script>
<style scoped>
.box-card {
    width: 80%;
}
.submit-btn{
    width:100%;
    display: flex;
    justify-content: center;
}
</style>